<template>
	<div>
		<el-submenu v-if="item.children != null && item.meta && !item.meta.isGroup && allowAccess" :key="item.name"
			:index="item.name" :disabled="item.meta && item.meta.disabled && item.meta.disabled == true">
			<template slot="title">
				<i :class="item.meta.icon" v-if="item.meta && item.meta.icon"></i>
				<span v-if="!(wordVisible == false && item.meta.icon)">{{ item.meta.title }}</span>
			</template>
			<sidebaritem v-for="item in item.children" :key="item.name" :item="item" />
		</el-submenu>

		<el-menu-item v-if="item.children == null && allowAccess" :key="item.name" :index="item.name"
			:disabled="item.meta.disabled && item.meta.disabled == true" @click="handleCLick(item)">
			<i :class="item.meta.icon" v-if="item.meta && item.meta.icon"></i>
			<span v-if="!(wordVisible == false && item.meta.icon)">{{ item.meta.title }}</span>
		</el-menu-item>

		<el-menu-item-group v-if="item.children != null && item.meta && item.meta.isGroup == true && allowAccess">
			<template slot="title" v-if="wordVisible">{{ item.meta.title }}</template>
			<sidebaritem v-for="item in item.children" :key="item.name" :item="item" />
		</el-menu-item-group>

	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: "sidebaritem",
	props: {
		// route object
		item: {
			type: Object,
			required: true,
		},
		wordVisible: {
			type: Boolean,
			default: true,
			required: false,
		},
	},


	data() {
		return {
			av: "none"
		};
	},

	computed: {
		...mapGetters(['token', 'permissions', 'roles']),
		allowAccess() {

			if (this.item.meta && this.item.meta.permissions && this.item.meta.permissions.length > 0) {
				// 有权限控制的
				if (this.permissions && this.permissions.length > 0) {
					const join = this.item.meta.permissions.filter(item => this.permissions.includes(item));
					return join.length > 0
				}
			} else {
				return true
			}
		},
		arrowVisable() {
			this.av = wordVisible ? "block" : "none"
			return wordVisible ? "block" : "none"
		}
	},

	methods: {
		handleCLick(item) {
			//在这里编程式导航
			this.$router.push({ name: item.name });
		},
	},
};
</script>

<style>
.el-submenu>.el-submenu__title>.el-submenu__icon-arrow {
	display: v-bind(av);
}
</style>